import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js';


function shwoIndex() {
    $.ajax({
        url: 'http://10.31.157.18/changhong/php/index1.php',
        dataType: 'json'
    }).done(function(data) {
        let strHtml = '';
        $.each(data, function(index, value) {
            if (value.sid >= 1 && value.sid <= 8) {
                strHtml += `<li>
                <a href="detail.html?sid=${value.sid}">
                    <img src="${value.picurl}" alt="">
                    <h4>${value.title}</h4>
                    <span>杜比视界 无边框全面屏</span>
                    <em>￥${value.price}</em>
                </a>
            </li>`;
            }

        })
        $('.view ul').html(strHtml);
    })

    $.ajax({
        url: 'http://10.31.157.18/changhong/php/index1.php',
        dataType: 'json'
    }).done(function(data) {
        let strHtml = '';
        $.each(data, function(index, value) {
            if (value.sid >= 9 && value.sid <= 16) {
                strHtml += `<li>
                <a href="detail.html?sid=${value.sid}">
                    <img src="${value.picurl}" alt="">
                    <h4>${value.title}</h4>
                    <span>杜比视界 无边框全面屏</span>
                    <em>￥${value.price}</em>
                </a>
            </li>`;
            }

        })
        $('.kt ul').html(strHtml);
    })

    $.ajax({
        url: 'http://10.31.157.18/changhong/php/index1.php',
        dataType: 'json'
    }).done(function(data) {
        let strHtml = '';
        $.each(data, function(index, value) {
            if (value.sid >= 17 && value.sid <= 24) {
                strHtml += `<li>
                <a href="detail.html?sid=${value.sid}">
                    <img src="${value.picurl}" alt="">
                    <h4>${value.title}</h4>
                    <span>杜比视界 无边框全面屏</span>
                    <em>￥${value.price}</em>
                </a>
            </li>`;
            }

        })
        $('.bx ul').html(strHtml);
    })


    function topNavTap() {
        let btns = $('.tab_list li');
        let items = $('.tab_content .item');
        btns.not($('.first')).hover(function() {
            $(this).addClass('active').siblings('li').removeClass('active');
            items.eq($(this).index() - 1).show().siblings('.item').hide();
            $('.tab_content').show();

            $('.tab_content').hover(() => {
                $('.tab_content').show();
                btns.eq(items.index()).addClass('active');
                $(this).addClass('active').siblings('li').removeClass('active');
            }, () => {
                $('.tab_content').hide();
                btns.removeClass('active');
            })
        }, function() {
            $('.tab_content').hide();
            btns.removeClass('active')
        });
    }
    topNavTap();

    function sidNav() {
        let btns = $('.nav .list li');
        let items = $('.nav_box .item');

        btns.hover(function() {
            $(this).addClass('active').siblings('li').removeClass('active');
            $('.nav_box').show();
            items.eq($(this).index()).show().siblings('.item').hide();
            $('.nav_box').hover(() => {
                $('.nav_box').show();
                btns.eq(items.index()).addClass('active');
                $(this).addClass('active').siblings('li').removeClass('active');
            }, () => {
                $('.nav_box').hide();
                btns.removeClass('active');
            })
        }, function() {
            $('.nav_box').hide();
            btns.removeClass('active')

        });
    }
    sidNav();


    // 显示购物车件数



    // 侧边栏楼梯效果

    function sidNavLouti() {
        const loutinav = $('.sid_nav_l')
        const rightNav = $('.sid_nav_r .go_top')
        const loutinavLi = $('.sid_nav_l li')
        const louceng = $('.louceng')


        rightNav.on('click', function() {
            $('html').animate({
                scrollTop: 0
            });
        });

        function scrollEvent() {
            let top = $(window).scrollTop();


            if (top >= $('header').height() + $('.example').height() && top <= $('header').height() + $('.example').height() + $('main').height() * 0.9) {
                loutinav.show();
            } else {
                loutinav.hide();
            }

            louceng.each(function(index, element) {
                let loucengtop = $(element).offset().top + $(this).height() / 2;
                if (loucengtop >= top) {
                    //楼层对应的楼梯添加一个类active
                    loutinavLi.eq(index).addClass('li_show').siblings('li').removeClass('li_show');
                    return false;
                }
            });
        }

        $(window).on('scroll', function() {
            scrollEvent();
        });

        scrollEvent();

        loutinavLi.on('click', function() {
            $(window).off('scroll');
            $(this).addClass('li_show').siblings('li').removeClass('li_show');
            //获取每一个楼层的top值
            let loucengtop = louceng.eq($(this).index()).offset().top;
            //document.documentElement.scrollTop = 0;
            $('html').animate({
                    scrollTop: loucengtop
                }

            );
        });

    }

    sidNavLouti();

    // 登录退出 未登录不能进入购物车

    function doShowCartList() {
        if (localStorage.getItem('localsid')) {
            let nums = localStorage.getItem('localsid').split(',');
            $('.goodtotal').html('(' + nums.length + ')');
        }
        let loginHtml = '';
        let carHtml = '';
        if (localStorage.getItem('tel')) {
            loginHtml = `
            <b>已登录 </b>
            <b class="logout">退出 </b>`
            carHtml = `
            <a href="./cartlist.html">
            <i class="iconfont">&#xe502;</i>&nbsp;购物车
            <em class="goodtotal"></em>
        </a>`
            $('header .nav_right p').html(loginHtml)
            $('.nav_right .go_cart').html(carHtml)

        }
        $('.logout').on('click', function() {
            localStorage.removeItem('tel')
            history.go(0)
        })
    }
    doShowCartList();


    //搜索
    function search() {
        $.ajax({
            url: 'http://10.31.157.18/changhong/php/search.php',
            dataType: 'json',
            data: {
                keyword: $('.search').val()
            }
        }).done(function(data) {
            let strHtml = ''
            $.each(data, function(index, value) {
                $.each(value, function(index, value2) {
                    strHtml = `
                    <li>
                   ${value2[0]} </li>`
                })
            })
            $('.search_box .list').html(strHtml)
        })
    }

    $('.search').on('input', function() {
        search();
    })
}

shwoIndex();